(function(){
  //同步课程
  var sync_course = document.querySelector(".sync_course ul");
  lesson.online.forEach((item) => {
    sync_course.innerHTML += `<li>
  <div class="sync_course_img">
    <img src="${item.src}" alt="">
    <div class="subscript">${item.cont}</div>
    <div class="study">${item.num}人在学习</div>
  </div>
  <div class="sync_course_bottom clearfix">
    <div class="sync_course_bottom_fl fl">
      <p>${item.title}</p>
      <span>${item.time}课时</span>
    </div>
    <div class="sync_course_bottom_fr fr">${item.isFree ? "免费学习" : ""}</div>
  </div>
</li>`;
  });
  //在线测试
  var test = document.querySelector(".test ul");
  lesson.test.forEach((item) => {
    test.innerHTML += `<li>
    <div class="test_img">
      <img src="${item.src}" alt="">
      <div class="subscript">${item.cont}</div>
      <div class="study">100人已经考试<span class="grade fr">${item.time}</span></div>
    </div>
    <div class="test_bottom clearfix">
      <div class="test_bottom_fl fl">
        <p>${item.title}</p>
        <span>23课时</span>
      </div>
      <div class="test_bottom_fr fr">去考试</div>
    </div>
  </li>`;
  });
  //精品课程
  var goods_course = document.querySelector(".goods_course ul");
  lesson.good.forEach((item) => {
    goods_course.innerHTML += `<li>
    <div class="goods_course_img">
      <img src="${item.src}" alt="">
      <div class="subscript">${item.cont}</div>
      <div class="study">${item.num}人在学习</div>
    </div>
    <div class="goods_course_bottom clearfix">
      <div class="goods_course_bottom_fl fl">
        <p>${item.title}</p>
        <span>${item.time}课时</span>
      </div>
      <div class="goods_course_bottom_fr fr">${
        item.isFree ? "免费学习" : ""
      }</div>
    </div>
  </li>`;
  });
  //轮播图
  var lunDiv = document.querySelector(".carousel_list");
  var imgList = document.querySelector(".carousel .imgList ul");
  var imgLi = imgList.children;
  var dot = document.querySelector(".carousel .dot ul");
  var dotA = dot.getElementsByTagName("a");
  var last = document.querySelector(".carousel .last");
  var next = document.querySelector(".carousel .next");
  var n = 0;
  bannerData.forEach((item) => {
    imgList.innerHTML += `<li><a href="#"><img src="${item.src}" alt=""></a></li>`;
    dot.innerHTML += `<li><a href="#"></a></li>`;
  });
  imgLi[n].style.opacity = "1";
  dotA[n].style.background = "#e28a6c";

  //下一张
  next.onclick = next1;
  function next1() {
    n++;
    if (n >= bannerData.length) {
      n = 0;
    }

    bannerData.forEach((item, index) => {
      bufferMove(imgLi[index], { opacity: 0 });
      dotA[index].style.background = "";
    });
    bufferMove(imgLi[n], { opacity: 100 });
    dotA[n].style.background = "#e28a6c";
  };
  last.onclick = function () {
    //上一张
    n--;
    if (n < 0) {
      n = bannerData.length - 1;
    }
    bannerData.forEach((item, index) => {
      bufferMove(imgLi[index], { opacity: 0 });
      dotA[index].style.background = "";
    });
    bufferMove(imgLi[n], { opacity: 100 });
    dotA[n].style.background = "#e28a6c";
  };
  //自动播放
  var timer = setInterval(next1, 1500);
  //鼠标悬浮停止播放
  lunDiv.onmouseenter = function () {
    clearInterval(timer);
  };
  //鼠标离开
  lunDiv.onmouseleave = function () {
    clearInterval(timer);
    timer = setInterval(next1, 1500);
  };
  //小圆点事件
  for(var i=0;i<dotA.length;i++){
    dotA[i].index = i;
    dotA[i].onclick = function(){
      for(var j=0;j<dotA.length;j++){
        dotA[j].style.background = "";
      }
      n = this.index-1;
      dotA[this.index].style.background = "#e28a6c";
      next1();
    }
  }
})()